<template>
  <view>
    <!-- 登录注册板块 -->
    <view class="login">
      <view class="title">{{loginType ? '密码登录' : '邮箱登录'}}</view>
      <view class="input-content">
        <view class="input-box">
          <image class="input-bg" src="" mode="scaleToFill"></image>
          <input v-if="loginType" class="input-phone" type="text" v-model="username" placeholder="登录账号" />
          <input v-else class="input-phone" type="text" v-model="email" placeholder="邮箱" />
        </view>
        <view class="input-box">
          <image class="input-bg" src="" mode="scaleToFill"></image>
          <input v-if="loginType" class="input-phone" type="password" v-model="password" placeholder="登录密码" />
          <input v-else class="input-phone" type="password" v-model="code" placeholder="邮箱验证码" />
        </view>
        <view v-if="loginType">
          <view class="left" @click="register">注册</view>
          <view class="left" @click="changeLoginType">验证码登录</view>
          <view class="right" @click="resetPwd">忘记密码</view>
        </view>
        <view v-else>
          <view class="left" @click="changeLoginType">密码登录</view>
          <view class="right" @click="getCode">获取验证码</view>
        </view>
      </view>
      <button v-if="loginType" class="login-btn" type="default" @click="doLogin">登录</button>
      <button v-else class="login-btn" type="default" @click="doLogin2">登录</button>
    </view>
  </view>
</template>

<script>
  import md5 from '../../common/js/md5'
  import Base64 from 'base-64';

  import {
    mapState,
    mapMutations,
  } from 'vuex'

  export default {
    name: "my-login",
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('m_user', ['userInfo', 'token']),
    },
    data() {
      return {
        username: 'admin',
        password: 'admin',
        email: '1740449951@qq.com',
        code: '',
        loginType: true,
      };
    },
    methods: {
      // 调用 mapMutations 辅助方法，把 m_user 模块中的 updateUserInfo 映射到当前组件中使用
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'saveMoney']),
      IsEmail(str) {
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        return reg.test(str);
      },
      changeLoginType() {
        this.loginType = !this.loginType;
      },
      // 获取邮箱验证码
      async getCode() {
        if (!this.IsEmail(this.email)) {
          return uni.$showMsg("请输入正确邮件");
        }
        const {
          data: result
        } = await uni.$http.get('/api/READ/api/my/login/send/login/email?to=' + this.email);
        uni.$showMsg(result.msg);
      },
      // 调用登录接口，换取永久的 token 获取微信用户的基本信息
      register() {
        uni.navigateTo({
          url: '/components/my-register/my-register'
        })

      },
      resetPwd() {
        uni.navigateTo({
          url: '/components/my-resetPwd/my-resetPwd'
        })
      },
      async getUserWXInfo(){
        uni.login({
          provider: 'weixin',
          success: function(loginRes) {
            console.log(loginRes);
            // 获取用户信息
            uni.getUserInfo({
              provider: 'weixin',
              success: function(infoRes) {
                console.log("用户信息")
                console.log(infoRes)
              }
            });
          }
        });
      },
      async doLogin2() {
        if (!this.IsEmail(this.email)) {
          return uni.$showMsg("请输入正确邮件");
        }
        if (this.code < 6) {
          return uni.$showMsg("请输入正确验证码");
        }
        
        var email = Base64.encode(this.email)
        let query = {
          email: email,
          code: this.code
        }
        console.log(query)
        // 换取 token
        const {
          data: loginResult
        } = await uni.$http.post('/api/READ/api/my/login/logine', query)
        console.log(loginResult)
        
        if (loginResult.code != 200) return uni.$showMsg(loginResult.msg)
        uni.$showMsg('登录成功')
        // 登录成功 保存信息
        this.updateToken(loginResult.data.token);
        loginResult.data.token = '';
        this.updateUserInfo(loginResult.data);
        // 保存钱
        this.saveMoney(loginResult.data);
        // console.log(loginResult.data)
        // 获取用户微信信息
        this.getUserWXInfo();
      },
      async doLogin(info) {
        if (this.username.length == 0 || this.password == 0) {
          uni.$showMsg("用户名或密码不能为空")
        }
        if (this.username.length < 4 || this.password < 4) {
          uni.$showMsg("用户名或密码不能小于4位")
        }

        var encryptPass = Base64.encode(this.password);
        encryptPass = md5.hexMd5(encryptPass + md5.KEY);
        let query = {
          userName: this.username,
          password: encryptPass
        }
        // 换取 token
        const {
          data: loginResult
        } = await uni.$http.post('/api/READ/api/my/login/loginc', query)
        // console.log(loginResult)

        if (loginResult.code != 200) return uni.$showMsg(loginResult.msg)
        uni.$showMsg('登录成功')
        // 登录成功 保存信息
        this.updateToken(loginResult.data.token);
        loginResult.data.token = '';
        this.updateUserInfo(loginResult.data);
        // 保存钱
        this.saveMoney(loginResult.data);
        // 获取用户微信信息
        this.getUserWXInfo();
      }
    }
  }
</script>

<style scoped lang="scss">
  .left {
    float: left;
    margin-left: 5%;
    color: steelblue;
  }

  .right {
    float: right;
    margin-right: 5%;
    text-align: right;
    color: steelblue;
  }

  .login {
    .bg-content {
      width: 100%;
      height: 450upx;
      position: relative;
      overflow: hidden;

      .bg {
        // width: 100%;
        width: 30upx;
        height: auto;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .title {
      padding: 47upx;
      text-indent: 55upx;
      font-size: 48upx;
      font-weight: 400;
      color: #333333;
    }

    .input-content {
      padding: 0 23upx;

      .input-box {
        position: relative;
        margin: 0 auto;
        padding: 0 50upx;
        height: 120upx;

        .input-bg {
          position: absolute;
          left: 0;
          right: 0;
          top: 40upx;
          bottom: 0;
          width: 30upx;
          height: 30upx;
        }

        .input-phone {
          width: 100%;
          height: 100upx;
        }

        .input-type {
          z-index: 2;
          position: absolute;
          right: 50upx;
          top: 30upx;
          width: 40upx;
          height: auto;
        }
      }
    }

    .login-btn {
      margin-top: 86upx;
      width: 92%;
      height: 104upx;
      background: #CC0000;
      border-radius: 52px;
      color: #FFFFFF;
      box-shadow: 0upx 0upx 20upx rgba(204, 0, 0, 0.2);
    }

    .checkbox {
      width: 92%;
      margin: 20upx auto;
      font-size: 28upx;

      .user {
        color: #0096FF;
      }
    }
  }
</style>
